<template>
  <div class="deivce-data-detail-list">
      <iu-header>
        <template #left>
          <x-icon
            @click="back"
            type="ios-arrow-back"
            size="21"
            fill="#fff"
          ></x-icon>
          <span>数据详情</span>
        </template>
        <template #right>
          <div @click="changeHome" class="scan">
            <span class="iconfont" @click="changeHome" style="font-size:22px;">&#xe607;</span>
          </div>
         <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
        </template>
      </iu-header>
      <div class="content-box">
      <div class="data-basic-info top-box">
        <div class="weui_cell">
          <div class="text1">数据名称：</div>
          <div class="text2 weui_cell_primary">{{dataName}}<span v-if="unitName">({{unitName}})</span></div>
        </div>
        <div class="weui_cell">
          <div class="text1">数据ID：</div>
          <div class="text2 weui_cell_primary">{{dataCode}}</div>
        </div>
      </div>
      <div v-show="runList.length==0" class="not-content">
        <img src="/static/img/zwlr-icon.png" class="img4">
        <div class="title">暂无数据</div>
      </div>
      <div v-show="runList.length>0" class="me_scroll">
        <mescroll-vue ref="mescroll3" :down="mescrollDown3" :up="mescrollUp3" @init="mescrollInit3">
          <!-- <div class="card"  v-for="(item,index) in runList" :key="index" @click="notCard">
                <div class="cardRunTitle">{{item.value}}</div>
                <div class="line" style="height: 1px"></div>
                <div class="cardBottom">
                  {{item.startTime}}<span v-if="item.endTime"> 至 {{item.endTime}}</span></div>
                <div class="imgIcon" v-if="index<runList.length-1"><img src="/static/img/gx-icon.png" alt=""></div>
          </div> -->
          <div class="card"  v-for="(item,index) in runList" :key="index" @click="notCard">
                <div class="cardRunTitle">{{item.startTime}}<span style="float:right">{{item.value}}</span></div>
                <div class="cardRunTitle cardRunTitleBottom" v-if="item.endTime">至 {{item.endTime}}</div>
                <div class="imgIcon" v-if="index<runList.length-1"><img src="/static/img/gx-icon.png" alt=""></div>
          </div>
        </mescroll-vue>
      </div>
      </div>
   </div>
</template>

<script>
  import MescrollVue from "mescroll.js/mescroll.vue";
  import BScroll from "better-scroll";
  import DeviceDao from '../../daos/device_dao'
  import iuHeader from "@/components/common/header/index";
  import DataAnalysisDao from '../../daos/data_analysis_dao'
  let _this = null;
  export default {
      name: "deviceDataDetail",
      data(){
          return{
            isAndriod:false,
            user:JSON.parse(localStorage.getItem('user')),
            runList:[],
            time:"",
            tabIndex:1,
            pollingIndex:1,
            replaceIndex:1,
            mescroll3: null,
            mescrollDown3: {},
            mescrollUp3: {
              that: this,
              callback: this.upCallback3,
              page: {
                num: 0,
                size: 20
              },
              htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
              noMoreSize: 5,
              toTop: {
                src: "./static/mescroll-totop.png",
                offset: 1000
              },
            },
            dataId : null,
            dataCode : null,
            dataName : null,
            unitName : null,
        }
      },
      components:{
        BScroll,
        MescrollVue,
        iuHeader,
      },
      watch: {
        $route (to, from) {
          // this.getPageType(to.name)
        },
      },
        //返回首页的公共方法
      inject: ["backToHomepage"],
      filters:{
        //设备类型过滤
        ruleText(val){
            let type = ''
            _this.ruleTypeList.forEach(item=>{
                if(item.indicator == val){
                    type = item.dataTypeName
                }
            })
            return type
        }
      },

      methods:{
        back(){
          this.$router.go(-1)
        },
        // 判断是否安卓手机
        isAndriodDevice() {
          var u = navigator.userAgent;
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
          return isAndroid
        },
        getTransformRuleList(){
           DeviceDao.transformRuleList({},res=>{
              this.ruleTypeList=res.data
              this.getDeviceCode()
            })
        },
        changeHome(){
          this.$router.push({name: 'manage'});
        },
        notCard(){
          // $('#total_num_view').fadeIn(200)
          // setTimeout(()=>{
          //   $("#total_num_view").fadeOut(200);
          // },1500)
        },
        getTime(my_time){
          var days    = my_time / 1000 / 60 / 60 / 24;
          var daysRound = Math.floor(days);
          var hours = my_time / 1000 / 60 / 60 - (24 * daysRound);
          var hoursRound = Math.floor(hours);
          var minutes = my_time / 1000 / 60 - (24 * 60 * daysRound) - (60 * hoursRound);
          var minutesRound = Math.floor(minutes);
          var seconds = my_time / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
          // console.log('转换时间:', daysRound + '天', hoursRound + '时', minutesRound + '分', seconds.toFixed(0) + '秒');
          if(daysRound>0){
            var time =  daysRound + '天'+ hoursRound + '时'+ minutesRound + '分'+ seconds.toFixed(0) + '秒';
          }else if(hoursRound>0){
            var time =   hoursRound + '时'+ minutesRound + '分'+ seconds.toFixed(0) + '秒';
          }else if(minutesRound>0){
            var time =   minutesRound + '分'+ seconds.toFixed(0) + '秒';
          }else if(seconds>=0){
            var time =   seconds.toFixed(0) + '秒';
          }
          return time;
        },
        mescrollInit3(mescroll) {
          this.mescroll3 = mescroll;
        },
        //运行记录
        upCallback3(page, mescroll) {
          if(!this.dataId){
            return;
          }
          let params = {
            biMetaDataId:this.dataId,
            pageNum: page.num,
            pageSize: page.size,
          };

          DataAnalysisDao.getDatasDetail(params, res=>{
            if(res){
              let data = res.content;
              if (page.num === 1) {
                this.runList = [];
              }
              for(let i=1;i<data.length;i++){
                this.runList.push({
                  value: data[i][0],
                  startTime: data[i][1],
                  endTime: data[i].length>2?data[i][2]:null,
                });
              }

             this.$nextTick(() => {
               mescroll.endSuccess(data.length);
             });
            } else {
             this.mescroll3.endErr();
            }
          });
        },
      },
      created () {
         _this = this
         // this.getTransformRuleList()
        this.isAndriod = this.isAndriodDevice()
      },
      mounted() {
        this.dataId = this.$route.query.dataId;
        this.dataCode = this.$route.query.dataCode;
        this.dataName = this.$route.query.dataName;
        this.unitName = this.$route.query.unitName;

        this.$nextTick(() => {
          if (!this.Scroll) {
            // debugger
            this.Scroll = new BScroll(this.$refs.mescroll3, {
              click: true,
              tap: true
            })
          }
        })

        this.upCallback3({num: 1,size: 20},this.mescroll3)

      },
    }
</script>

<style lang="less" scoped>
  *{
    -ms-touch-action: unset !important;
    touch-action: unset !important;
  }
  .deivce-data-detail-list{
    // position: fixed;
    width: 100%;
    height: 100vh;
    background:#151624;
    .weui_cell_primary {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }
    .weui_cell {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .scan{
      margin-top: 3px;
      margin-right: 12px;
    }
    .total_num_view {
      position: absolute;
      bottom: 30%;
      left: 50%;
      -webkit-transform: translate(-50%);
      transform: translate(-50%);
      height: 1.173333rem;
      line-height: 1.173333rem;
      text-align: center;
      font-size: .373333rem;
      color: #333;
      width: 4.373333rem;
      background: hsla(0,0%,100%,.8);
      border-radius: 1.333333rem;
      display: none;
      z-index: 800;
    }
    .top{
      width: 100%;
      // position: fixed;
      left: 0;
      top: 0;
      font-size:17px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(255,255,255,1);
      height: 46px;
      background:#1f2037;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      .l-img{
        position: absolute;
        width: 22px;
        height: 22px;
        left: 11px;
      }
      .r-img{
        position: absolute;
        width: 34px;
        height: 34px;
        right: 16px;
      }
    }
    .top-box{
      // position: fixed;
      width: 100%;
      height: auto;
      max-height: 600px;
      top: 50px;
      left: 0;
      padding: 14px 16px 0;
      background:#151624;
      overflow: hidden;
      z-index: 10;
      /*transition: max-height .3s ease-in-out;*/
      &.notMore{
        max-height: 80px;
        /*transition: max-height .3s ease-in-out;*/
      }
      .more{
        position: absolute;
        top: 14px;
        right: 16px;
        font-size:15px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color: rgba(255, 255, 255, 0.6);
        z-index: 10;
        display: flex;
        align-items: center;
        &.active1{
          color:rgba(69,109,230,1);
          .icon2{
            display: none;
          }
          .icon1{
            display: inherit;
          }
        }
        .icon1{
          display: none;
        }
        img{
          width: 16px;
          height: 16px;
          margin-left: 6px;
        }
      }
      .weui_cell{
        margin-bottom: 10px;
        .text1{
          font-size:15px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,0.6);
          margin-right: 15px;
        }
        .text2{
          font-size:15px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          padding-right: 69px;
        }
        .text3{
          font-size:15px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          margin-top: 5px;
        }
      }
      .line{
        width: 100%;
        height:1px;
        background:rgba(255,255,255,0.1);
        margin-bottom: 10px;
      }
    }
    .top-tab{
      // position: fixed;
      background:#1f2037;
      width: 100%;
      padding: 20px 0 16px;
      z-index: 10;
      .weui_cell_primary{
        position: relative;
        &.active1{
          .title{
            font-size:19px;
            color:rgba(69,109,230,1);
          }
          .line{
            opacity: 1;
          }
        }
        .title{
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          text-align: center;
          white-space: nowrap;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
           width: 14px;
            height: 14px;
          }
        }
        .line{
          width:20px;
          height:3px;
          background:rgba(69,109,230,1);
          opacity: 0;
          transition: .3s all ease;
          margin: 0 auto;
        }
      }
      .flex{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        .box{
          min-width:90px;
          height:28px;
          border-radius:2px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,255,255,1);
          padding: 0 5px;
          padding-top: 0.8vh;
          /*line-height: 28px;*/
          text-align: center;
          /*display: flex;*/
          /*align-items: center;*/
          /*justify-content: center;*/
          margin: 0 17px;
          background: transparent;
          transition: .5s all ease-in-out;
          &.active1{
            background:rgba(69,109,230,1);
          }
        }
      }
    }
    .content-box{
      position: relative;
      height: 100vh;
      overflow: hidden;
      background: #1f2037;
      .not-content{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        text-align: center;
        img{
          width: 64px;
          height: 64px;
          margin-left: 20px;
        }

        .title{
          margin: 8px auto;
          width:126px;
          height:40px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(158,198,251,1);
          line-height:20px;
          text-align: center;
        }
      }
      .me_scroll {
        padding: 10px 16px 32px;
        box-sizing: border-box;
        height: 100vh;
        overflow: hidden;
      }
      .card{
        border-radius: 4px;
        background:#292A4D;
        margin-bottom: 12px;
        position: relative;
        transition: .2s all ease-in-out;
        &.active1{
          background: #383A69;
        }
        // padding: 5px 10px;
        .cardTitle{
          font-size: 17px;
          padding: 8px;
          color: white;
          .title{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .cardTitle2{
          color: rgba(255,255,255,0.5);
          font-size: 14px;
          padding: 0px 8px 8px;
        }
        .line{
          height: 1px;
          width: 100%;
          background: #ffffff;
          opacity: 0.1;
        }
        .cardBottom{
          color: rgba(255,255,255,0.5);
          font-size: 15px;
          padding: 8px;
          .title{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .cardRunTitle{
          font-size: 16px;
          padding: 8px 10px;
          overflow: hidden;
          border-top-left-radius: 0.1067rem;
          color: white;
          span{
            margin-left: 10px;
          }
        }
        .cardRunTitleBottom{
          padding: 0px 10px 8px 10px;
        }
        .imgIcon{
          width: 169px;
          height: 22px;
          margin-left: 50%;
          transform: translateX(-50%);
          position: absolute;
          bottom: -15px;
          z-index: 100;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .run1{
          border-left: 2px solid #ffffff;
        }
        .run2{
          border-left: 2px solid #456DE6;
        }
        .run3{
          border-left: 2px solid #4FDBE5;
        }
        .run4{
          border-left: 2px solid #DD2306;
        }
        .run5{
          border-left: 2px solid #DD9710;
        }
      }
    }
    .showPie{
      width: 100%;
      height: 350px !important;
    }
    .wrapper{
    padding-bottom: 10px;
    overflow-y: auto;
    width: 100%;
    }
  }
</style>
